<template>
  <div class="custom-portrait">
    <div class="component-container">
      <div class="drawcontainer">
        <!-- 返回按钮 -->
        <div class="back-box">
          <div style="flex: 1">
            <i
              class="el-icon-arrow-left"
              style="color: #4b6eef;cursor:pointer"
              @click="$router.go(-1)"
            >返回</i> |
            <span style="color: #505255">事件详情</span>
          </div>
          <div class="flex-rt">
            <el-button
              v-if="$route.query.disposalStatus!=3"
              type="primary"
              @click.stop="handleDetail(tableCheckList)"
            >批量处置</el-button>
            <el-button
              v-if="$route.query.disposalStatus!=3"
              type="primary"
              @click.stop="handleDetail(tableCheckList,'close')"
            >批量关闭</el-button>
          </div>
        </div>
        <div class="content-wk">
          <div style="margin-left: 20px">
            <div class="title">近一月事件发生趋势</div>
            <lineEchart height="340px" :cdata="eventTrendsData" />
          </div>
          <div class="tab-content">
            <div class="tab-header">
              <div class="left-btn">
                <template v-if="activeIndex == 0">
                  <!--                    <el-button type="text" @click="handleSign">批量标记误报</el-button>-->
                  <!--                    <el-button type="text" @click="handleDeal">批量处置</el-button>-->
                </template>
              </div>
              <div class="right-btn">
                <span @click="handleTimeSort">
                  时间排序
                  <i class="el-icon-time" />
                </span>
                <span @click="handleEventLevelSort">
                  事件级别排序
                  <i class="el-icon-sort" />
                </span>
              </div>
            </div>
            <HkTable
              :table-data="tableData"
              :table-columns="tableLabelLists"
              :is-need-index="true"
              :selection="true"
              :total="total"
              :show-overflow-tooltip="false"
              @handleSelectionChange="handleSelectionChange"
              @changePage="changePage"
            >
              <template #list="scope">
                <div @click.stop="handleDetailDone(scope.row.row.id, $route.query.disposalStatus)">
                  <p class="tablelist-title">{{ scope.row.row.metrics_name }}</p>
                  <div class="table-item">
                    <div style="width:calc(100% - 150px)">
                      <el-row>
                        <el-col :span="7">
                          <span>事件分类：</span>
                          <span>{{ scope.row.row.event_category[0] }}</span>
                        </el-col>
                        <el-col :span="7">
                          <span>事件级别：</span>
                          <el-tag
                            :type=" scope.row.row.event_level[0] == '特别重大'
                              ? 'danger'
                              : scope.row.row.event_level[0] == '重大'
                                ? 'warning'
                                : scope.row.row.event_level[0] == '较大'
                                  ? ''
                                  : 'success'"
                          >{{ scope.row.row.event_level[0] }}</el-tag>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="7">
                          <span>告警时间：</span>
                          {{ scope.row.row.event_createtime }}
                        </el-col>
                        <el-col :span="7">
                          <span>发现时间：</span>
                          {{ scope.row.row.happen_time }}
                        </el-col>
                      </el-row>
                      <el-row>事件详情：{{ scope.row.row.event_details }}</el-row>
                      <el-row v-if="scope.row.row.assetData">
                        <el-col v-if="scope.row.row.assetData[0]" class="hk-flex flex-emplis" :span="7">
                          <span style>关联资产（{{ scope.row.row.assetData[0].count }}）：</span>
                          <span
                            class="text-ellipsis"
                            style="margin: 0 5px;"
                          >{{ scope.row.row.assetData[0].value | expandArray }}</span>
                        </el-col>
                        <el-col v-if="scope.row.row.assetData[1]" class="hk-flex flex-emplis" :span="7">
                          <span style>关联人员（{{ scope.row.row.assetData[1].count }}）：</span>
                          <span
                            class="text-ellipsis"
                            style="margin: 0 5px"
                          >{{ scope.row.row.assetData[1].value | expandArray }}</span>
                        </el-col>
                        <el-col v-if="scope.row.row.assetData[2]" class="hk-flex flex-emplis" :span="7">
                          <span style>关联应用（{{ scope.row.row.assetData[2].count }}）：</span>
                          <span
                            class="text-ellipsis"
                            style="margin: 0 5px"
                          >{{ scope.row.row.assetData[2].value | expandArray }}</span>
                        </el-col>
                      </el-row>
                    </div>
                    <div v-if="$route.query.disposalStatus !=3" class="btn">
                      <el-button
                        v-if="$route.query.disposalStatus!=5"
                        type="primary"
                        @click.stop="handleDetail(scope.row.row.id)"
                      >处置</el-button>
                      <el-button
                        v-if="$route.query.disposalStatus!=5"
                        type="primary"
                        @click.stop="handleDetail(scope.row.row.id,'close')"
                      >关闭</el-button>
                    </div>
                  </div>
                </div>
              </template>
            </HkTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import lineEchart from './components/lineEchart'
import { tableList, aggrIncidentChart } from '@/api/dispose/incidentHandling'
export default {
  components: { HkTable, lineEchart },
  filters: {
    expandArray(val) {
      let _text = ''
      if (val.length > 0) {
        _text = val.join('，')
      } else {
        _text = '-'
      }
      return _text
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == '/dispose/incidentHandle') {
      to.meta.keepAlive = true
    }
    next()
  },
  data() {
    return {
      metrics_code: '',
      tableCheckList: [],
      tableData: [],
      total: 0,
      activeIndex: 0,
      queryParams: {
        current: 1,
        size: 10,
        eventLevelSort: undefined,
        timeSort: undefined
      },
      tableLabelLists: [{ label: '', param: 'list', type: 'slot' }],
      eventTrendsData: {
        xAxis: [],
        legendName: ['事件趋势'],
        value: [],
        color: '#4b6eef'
      }
    }
  },
  mounted() {
    const { ip, eventCode, disposalStatus, startTime, endTime, batchId } = this.$route.query
    this.queryParams = {
      ...this.queryParams,
      ip: ip || undefined,
      eventCode: eventCode || undefined,
      disposalStatus: disposalStatus || undefined,
      startTime: startTime || undefined,
      endTime: endTime || undefined,
      batchId: disposalStatus == 2 ? batchId : null
    }
    this.getList(this.queryParams)
    this.getChart(this.queryParams)
  },
  methods: {
    /** 获取列表数据 */
    getList(query) {
      this.loading = true
      tableList(query).then(res => {
        this.loading = false
        this.tableData = res.list
        this.metrics_code = res?.list[0]?.metrics_code
        this.total = res.total
      })
    },
    /** 获取echart数据 */
    getChart(query) {
      aggrIncidentChart(query).then(res => {
        this.eventTrendsData.xAxis = res.xaxis
        this.eventTrendsData.value = res.value
      })
    },
    /** 列表复选框 */
    handleSelectionChange(data) {
      this.tableCheckList = data.map(item => item.id)
    },
    //  点击分页
    changePage(data) {
      this.queryParams.current = data.current
      this.queryParams.size = data.size
      this.getList(this.queryParams)
    },
    /** 按时间排序 */
    handleTimeSort() {
      this.queryParams.eventLevelSort = undefined
      if (this.queryParams.timeSort == 0) {
        this.queryParams.timeSort = 1
      } else {
        this.queryParams.timeSort = 0
      }
      this.getList(this.queryParams)
    },
    /** 按事件级别排序 */
    handleEventLevelSort() {
      this.queryParams.timeSort = undefined
      if (this.queryParams.eventLevelSort == 0) {
        this.queryParams.eventLevelSort = 1
      } else {
        this.queryParams.eventLevelSort = 0
      }
      this.getList(this.queryParams)
    },
    /** 处置 */
    handleDetail(ids, disposal) {
      let disposalStatus
      if (disposal) { disposalStatus = 0 }
      if (ids.length === 0) {
        this.$message.warning('请选择需要批量操作的数据')
        return
      }
      if ((typeof ids) === 'string') {
        this.$router.push({ path: window.prefix + '/dispose/incidentHandle/detail', query: { showBack: true, ids: ids, metricsCode: this.metrics_code, disposalStatus: disposalStatus }})
      } else {
        this.$router.push({ path: window.prefix + '/dispose/incidentHandle/detail', query: { showBack: true, ids: ids.join(','), metricsCode: this.metrics_code, disposalStatus: disposalStatus }})
      }
    },
    /** 已处置跳转 */
    handleDetailDone(ids, disposalStatus) {
      if (disposalStatus != 0) {
        this.$router.push({ path: window.prefix + '/dispose/incidentHandle/detail', query: { showBack: true, ids: ids }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
  .back-box {
    span {
      color: #fff !important;
    }
  }
  .content-wk {
    background: rgba(59, 139, 255, 0.1);
  }
}
::v-deep .el-tag {
  width: 100px !important;
  text-align: center;
}
.custom-portrait {
  height: 100%;

  .component-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #eef0f5;
    // 返回按钮
    .back-box {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e9e9e9;
      color: #989a9c;
      padding: 10px 15px;
    }
    // 顶部
    .drawcontainer {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      border-radius: 6px;
      // 返回按钮
      .back {
        display: flex;
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #e9e9e9;
        color: #989a9c;
        padding: 10px 15px;
      }
      .content-wk {
        background: #fff;
        overflow: auto;
        .tab-content {
          position: relative;
          display: flex;
          flex-direction: column;
          .tab-header {
            position: absolute;
            top: 24px;
            font-size: 14px;
            right: 2%;
            z-index: 2;
            width: 94%;
            display: flex;
            align-items: center;

            .left-btn {
              flex: 1;
            }

            .right-btn {
              span {
                display: inline-block;
                padding: 10px 0;
                cursor: pointer;
                margin-left: 20px;
              }
            }
          }

          .table-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 20px;
            .el-row {
              margin-bottom: 10px;
              text-overflow: ellipsis;
              width: 100%;
              overflow: hidden;
            }

            > .btn {
              margin-left: 20px;
            }
          }
        }
      }
    }
    .flex-emplis{
      overflow:hidden;
      .text-ellipsis{
        flex:1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
.el-button + .el-button {
  margin-left: 10px;
}
</style>
